import * as React from "react";
import { useState, useEffect } from "react";
import { Button, DatePicker } from "antd";
import moment from "moment";
const DatePickers:any= DatePicker;
export enum dateEnum {
  "date" = "date",
  "time" = "time",
  "month" = "month",
  "year" = "year",
}
interface ITimeModePickerProps {
  style?: any;
  onChange: (date: any, dateString: string) => any;
}
const TimeModePicker = (props: ITimeModePickerProps) => {
  const [time, setTime] = useState<
    "date" | "time" | "month" | "year" | "week" | "quarter"
  >("date");
  const [dateString, setDateString] = useState<string>("");

  const [Bbb, setBbb] = useState<any>(moment());
  const getTime = (date: any) => {
    setBbb(date);
  };

  let { onChange } = props;
  useEffect(() => {
    switch (time) {
      case "year":
        setDateString(Bbb.format("YYYY"));
        break;
      case "month":
        setDateString(Bbb.format("YYYY-MM"));
        break;
      case "date":
        setDateString(Bbb.format("YYYY-MM-DD"));
        break;

      default:
        break;
    }
  }, [time, Bbb]);

  useEffect(() => {
    onChange(time, dateString);
  }, [time, dateString, onChange]);

  return (
    <>
      <span style={{ paddingLeft: 26 }}>时间粒度：</span>
      <div className="changeType_btn d_inlineFlex" style={props.style}>
        <Button
          className="left"
          type={time === "date" ? "primary" : "default"}
          onClick={() => {
            setTime("date");
          }}
        >
          日
        </Button>
        <Button
          className="center"
          type={time === "month" ? "primary" : "default"}
          onClick={() => {
            setTime("month");
          }}
        >
          月
        </Button>
        <Button
          className="right"
          type={time === "year" ? "primary" : "default"}
          onClick={() => {
            setTime("year");
          }}
        >
          年
        </Button>
      </div>
      <span style={{ paddingLeft: 26 }}>时间筛选：</span>
      <DatePickers
        allowClear={false}
        picker={time}
        value={Bbb}
        onChange={(date: any) => {
          getTime(date);
        }}
      />
    </>
  );
};
export default TimeModePicker;
